<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MVR设备租赁平台 - 首页</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@400;600&display=swap" rel="stylesheet">
  <style>
    body { font-family: 'SF Pro Display', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; }
    .carousel {
      position: relative;
      width: 100%;
      height: 160px;
      overflow: hidden;
      border-radius: 1rem;
      margin-bottom: 1.5rem;
      user-select: none;
      touch-action: pan-y;
    }
    .carousel img {
      width: 100%;
      height: 160px;
      object-fit: cover;
      transition: opacity 0.5s;
      position: absolute;
      left: 0; top: 0;
      opacity: 0;
      z-index: 0;
    }
    .carousel img.active {
      opacity: 1;
      z-index: 1;
    }
    .carousel-indicators {
      position: absolute;
      bottom: 10px;
      left: 0;
      width: 100%;
      text-align: center;
      z-index: 2;
    }
    .carousel-indicators span {
      display: inline-block;
      width: 10px;
      height: 10px;
      margin: 0 4px;
      background: #fff;
      border-radius: 50%;
      opacity: 0.5;
      transition: opacity 0.3s, background 0.3s;
      cursor: pointer;
      border: 1.5px solid #3b82f6;
    }
    .carousel-indicators span.active {
      opacity: 1;
      background: #3b82f6;
    }
    .carousel-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0,0,0,0.2);
      color: #fff;
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3;
      cursor: pointer;
      font-size: 1.2rem;
      transition: background 0.2s;
    }
    .carousel-arrow.left { left: 10px; }
    .carousel-arrow.right { right: 10px; }
    .carousel-arrow:hover { background: rgba(59,130,246,0.7); }
  </style>
</head>
<body class="bg-gray-100 min-h-screen">
  <div class="max-w-md mx-auto py-6">
    <!-- 返回按钮 -->
    <div class="mb-2">
      <a href="index.html" class="inline-flex items-center px-3 py-1 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300 transition"><i class="fa fa-chevron-left mr-1"></i>返回</a>
    </div>
    <!-- Banner轮播区域 -->
    <div class="carousel" id="carousel">
      <button class="carousel-arrow left" id="arrowLeft" aria-label="上一张"><i class="fa fa-chevron-left"></i></button>
      <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=600&q=80" alt="banner1" class="active">
      <img src="https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=600&q=80" alt="banner2">
      <img src="https://images.unsplash.com/photo-1519125323398-675f0ddb6308?auto=format&fit=facearea&w=600&q=80" alt="banner3">
      <button class="carousel-arrow right" id="arrowRight" aria-label="下一张"><i class="fa fa-chevron-right"></i></button>
      <div class="absolute top-8 left-0 w-full text-center pointer-events-none">
        <h1 class="text-2xl font-bold text-white drop-shadow-lg">MVR高盐废水处理专家</h1>
      </div>
      <div class="carousel-indicators">
        <span class="active"></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <!-- 客户案例 -->
    <div class="mb-6">
      <div class="flex items-center mb-2">
        <i class="fa fa-users text-blue-500 mr-2"></i>
        <span class="text-lg font-semibold">客户案例</span>
      </div>
      <div class="grid grid-cols-2 gap-4">
        <div class="bg-white rounded-xl shadow p-4 flex flex-col items-center">
          <img src="https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=80&q=80" alt="案例1" class="w-14 h-14 rounded-lg object-cover mb-2">
          <div class="font-medium text-sm">化工园区零排放</div>
          <div class="text-xs text-gray-400 mt-1">MVR-1000A</div>
        </div>
        <div class="bg-white rounded-xl shadow p-4 flex flex-col items-center">
          <img src="https://images.unsplash.com/photo-1519125323398-675f0ddb6308?auto=format&fit=facearea&w=80&q=80" alt="案例2" class="w-14 h-14 rounded-lg object-cover mb-2">
          <div class="font-medium text-sm">制药废水资源化</div>
          <div class="text-xs text-gray-400 mt-1">MVR-2000B</div>
        </div>
      </div>
    </div>
    <!-- 设备推荐 -->
    <div class="mb-4">
      <div class="flex items-center mb-2">
        <i class="fa fa-star text-yellow-400 mr-2"></i>
        <span class="text-lg font-semibold">设备推荐</span>
      </div>
      <div class="space-y-4">
        <a href="device-detail.html" class="block bg-white rounded-xl shadow p-4 flex items-center hover:bg-blue-50 transition">
          <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=80&q=80" alt="设备图片" class="w-16 h-16 rounded-lg object-cover mr-4">
          <div class="flex-1">
            <div class="font-semibold text-lg">MVR-1000A</div>
            <div class="text-gray-500 text-sm mt-1">处理量：50吨/天 | 能耗：12kWh/吨</div>
            <div class="text-blue-500 font-bold mt-2">￥3000/天</div>
          </div>
          <i class="fa fa-chevron-right text-gray-400"></i>
        </a>
        <a href="device-detail.html" class="block bg-white rounded-xl shadow p-4 flex items-center hover:bg-blue-50 transition">
          <img src="https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=80&q=80" alt="设备图片" class="w-16 h-16 rounded-lg object-cover mr-4">
          <div class="flex-1">
            <div class="font-semibold text-lg">MVR-2000B</div>
            <div class="text-gray-500 text-sm mt-1">处理量：100吨/天 | 能耗：10kWh/吨</div>
            <div class="text-blue-500 font-bold mt-2">￥5000/天</div>
          </div>
          <i class="fa fa-chevron-right text-gray-400"></i>
        </a>
      </div>
    </div>
    <div class="text-center text-xs text-gray-400 mt-8">© 2024 MVR设备租赁平台</div>
  </div>
  <script>
    // 轮播逻辑，支持自动、左右箭头、指示器点击、左右滑动
    const images = document.querySelectorAll('.carousel img');
    const indicators = document.querySelectorAll('.carousel-indicators span');
    const arrowLeft = document.getElementById('arrowLeft');
    const arrowRight = document.getElementById('arrowRight');
    const carousel = document.getElementById('carousel');
    let idx = 0;
    let timer = null;

    function show(idxToShow) {
      images.forEach((img, i) => img.classList.toggle('active', i === idxToShow));
      indicators.forEach((dot, i) => dot.classList.toggle('active', i === idxToShow));
      idx = idxToShow;
    }
    function next() { show((idx + 1) % images.length); }
    function prev() { show((idx - 1 + images.length) % images.length); }
    function auto() {
      timer = setInterval(next, 3000);
    }
    function stopAuto() {
      if (timer) clearInterval(timer);
    }
    arrowLeft.onclick = () => { stopAuto(); prev(); auto(); };
    arrowRight.onclick = () => { stopAuto(); next(); auto(); };
    indicators.forEach((dot, i) => {
      dot.onclick = () => { stopAuto(); show(i); auto(); };
    });
    // 支持触摸滑动
    let startX = 0;
    carousel.addEventListener('touchstart', e => {
      stopAuto();
      startX = e.touches[0].clientX;
    });
    carousel.addEventListener('touchend', e => {
      let endX = e.changedTouches[0].clientX;
      if (endX - startX > 40) prev();
      else if (startX - endX > 40) next();
      auto();
    });
    auto();
  </script>
</body>
</html> 